<template>
  <div v-if="fiftyList.length">
    <div class="grid-content bg-purple left">
      <div class="title">
        <span>{{ index + 1 }}#&nbsp;</span>
        <span>{{ fiftyList[index].title }}</span>
        <div class="wen" @click="wenClick">?</div>
      </div>
      <div class="answer">
        <label v-for="(v, i) in fiftyList[index].options" :key="i">
          <input
            type="checkbox"
            :value="v.index"
            v-model="fiftyList[index].userAnswers"
          />
          {{ v.index }}、
          <span>{{ v.value }}</span>
          <br />
        </label>
        {{ fiftyList[index].userAnswers }}
      </div>
    </div>
    {{ fiftyList[index].answers }}
    <div class="btn">
      <el-button @click="last" :disabled="index == 0">上一题</el-button>
      <el-button
        style="margin-left:30px;"
        @click="
          next(fiftyList[index].answers, fiftyList[index].userAnswers, index)
        "
        >{{ index == 49 ? "提交" : "下一题" }}</el-button
      >
    </div>
    <el-drawer
      title="答案提示"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <h3 style="margin-left:20px;">{{ fiftyList[index].tips }}</h3>
    </el-drawer>
    <el-dialog
      v-if="isTimerOver"
      title="提示"
      :visible.sync="isShowDirlog"
      width="30%"
      :before-close="handleClose"
    >
      <span style="lineHeight:25px;">时间到！</span>
      <br />
      <span style="lineHeight:25px;">
        用时：
        <span style="fontWeight:bold">50分00秒</span>
      </span>
      <br />
      <span style="lineHeight:25px;">分数：{{ score * 1 }}分</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SET_DIRLOG(false)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-else
      title="提示"
      :visible.sync="isShowDirlog"
      width="30%"
      :before-close="handleClose"
    >
      <span style="lineHeight:25px;">恭喜完成本次学习！</span>
      <br />
      <span style="lineHeight:25px;">
        用时：
        <span style="fontWeight:bold">{{
          bu(parseInt((totleSecond - totleTime) / 60) % 60) +
            "分" +
            bu((totleSecond - totleTime) % 60) +
            "秒"
        }}</span>
      </span>
      <br />
      <span style="lineHeight:25px;">分数：{{ score * 1 }}分</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SET_DIRLOG(false)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    ...mapMutations("question", [
      "SET_INDEX",
      "SET_ISRIGHT",
      "SET_DIRLOG",
      "SET_SCORE",
    ]),
    ...mapActions("question", ["getdata"]),
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    bu(n) {
      return n < 10 ? "0" + n : n;
    },
    wenClick() {
      this.drawer = true;
    },
    last() {
      if (this.index > 0) {
        this.SET_INDEX(this.index - 1);
      } else {
        this.$message("已经到第一题了！！！");
        return;
      }
    },
    next(right, userAnswer, index) {
      if (!userAnswer.length) {
        this.$message("你没有选择哦！");
        return;
      }
      if (right == JSON.stringify(userAnswer.sort())) {
        this.SET_ISRIGHT("right");
        this.SET_SCORE(this.score + 1);
      } else {
        this.SET_ISRIGHT("wrong");
      }

      if (this.index < 49) {
        this.SET_INDEX(this.index + 1);
      } else {
        let arr = [];
        this.fiftyList.map((v, i) => {
          if (!v.userAnswers.length) {
            arr.push(i + 1);
          }
        });
        if (
          this.fiftyList.find((v) => {
            return v.userAnswers.length == 0;
          })
        ) {
          if (
            confirm(
              "还有" + arr.join(",") + "题没有选择答案" + ",确定要提交吗？"
            )
          ) {
            this.SET_DIRLOG(true);
            clearInterval(this.timer);
          } else {
            return;
          }
        }
      }
    },
  },
  computed: {
    ...mapState("question", [
      "fiftyList",
      "index",
      "isShowDirlog",
      "isTimerOver",
      "score",
      "totleTime",
      "totleSecond",
      "timer",
    ]),
  },
};
</script>

<style scoped>
.left {
  margin-left: 50px;
}

.title span {
  font-size: 18px;
  font-weight: 800;
}

.answer {
  margin-top: 10px;
}

.answer label {
  line-height: 30px;
}

.wen {
  width: 18px;
  height: 18px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
  font-size: 13px;
}

.btn {
  margin-left: 45px;
  margin-top: 30px;
}
</style>
